<template>
  <div style="padding-bottom: 42px;">
    <div class="search-block" v-if="showsearch">
      <searchtab @searchopen="opensearch" @checkstab="goindex" @linksearch="searchlink" :tablist="tablistprop"></searchtab>
    </div>
    <div class="search-block-new" v-if="showsearchlist">
      <searchlist @cansearch="searchcan" :searchprop="searchtext"></searchlist>
    </div>
    <div class="login-bloock" v-if="showlogin">
      <loginpop @bindlogin="loginbloock" :forgetpwd="showforget"></loginpop>
    </div>
    <div class="detail-top-tab pc-bk" >
      <navblock></navblock>
    </div>
    <div class="top-content-block" v-if="loginuser">
      <div class="left-nav pc-bk" ref="leftnav" v-bind:class="{'scroll':scrolldetail === 1}" ><!--左侧导航-->
        <div class="side-header hy">
          <span class="sidle-text">{{first_level_cname}}
          <!-- <i>BRAINPOWER</i> -->
          </span>
          <span class="sidle-icon"><img src="../../img/mobile/side-header-hy.jpg"></span>
        </div>
        <div class="meeting-list  detail-sidle">
          <ul>
            <li v-for="(meetlist, index) in tablist" v-if="meetlist.item_id !== 0" v-bind:class="{'open': meetlist.is_selected === 1}" @click="linktoUser" :data-key="meetlist.key" >
              <div class="detail-sidle-main" >
                <span class="focus-icon">
                </span>
                <span class="focus-title-link">
                  {{meetlist.name}}
                </span>
              </div>
            </li>
          </ul>
        </div>
      </div>
      <div class="listpage-content"  v-bind:class="{'scroll':scrolldetail === 1}" >
        <div class="top-line-title">
          <div class="side-header light-user pc-bk">
            <span class="sidle-text">{{thistitle}}</span>
            <span class="sidle-icon"><img src="../../img/mobile/side-header-light.jpg"></span>
          </div>
          <div class="detail-search">
            <input type="text"  v-model="searchtext" placeholder="全站搜索 Search" @keyup.enter="searchBtn1">
            <img src="../../img/mobile/search_new.png"  @click="searchBtn1">
          </div>
        </div>
        <div class="content-list-block" v-if="thisid === 1">
          <div class="userinfo-setting">
            <div class="setting-header">
              <span class="user-header" v-if="cover.url !== ''"><img  :src="cover.url"></span>
              <span class="user-header" v-else><img src="../../img/mobile/blank.jpg"></span>
              <div class="setting-header-rg">
                <div class="header-modify">
                  <span class="hd-note">
                    头像照片
                  </span>
                  <span class="hd-md">
                    <input type="file" @change="getFile($event)" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg">修改头像
                  </span>
                </div>
                <div class="header-note">
                  仅支持JPG，GIF，JPEG，BMP格式
                </div>
                <div class="header-note">
                  文件小于4M
                </div>
                <div class="header-note">
                  头像最佳尺寸：100*100
                </div>
              </div>
            </div>
            <el-form ref="form" :inline="true" :model="form" label-width="80px">
              <div class="setting-info">
                <div class="info-note">
                  基本信息：
                </div>
                <div class="info-content">
                  <span class="left-info-note">
                    用户名：
                  </span>
                  <span class="right-info">
                    {{form.user_name}}
                  </span>
                </div>
               <!--  <div class="info-content">
                  <span class="left-info-note">
                    登录名：
                  </span>
                  <span class="right-info" v-if="!mdloginname">
                    {{form.login_name}}
                  </span>
                  <span class="right-info" v-else>
                    <el-form-item>
                      <el-input v-model="form.login_name"></el-input>
                    </el-form-item>
                  </span>
                  <span class="md-username" @click="mdusername" v-if="!mdloginname">修改</span>
                  <span class="md-username" @click="canusername" v-else>取消</span>
                  <span class="username-note">(可用于登录，请牢记哦~)</span>
                </div> -->
                <!-- <div class="info-content">
                  <span class="left-info-note">
                    昵称：
                  </span>
                  <span class="right-info" v-if="!mdnickname">
                    {{form.nick_name}}
                  </span>
                  <span class="right-info" v-else>
                    <el-form-item>
                      <el-input v-model="form.nick_name"></el-input>
                    </el-form-item>
                  </span>
                </div> -->
                <div class="info-content">
                  <span class="left-info-note">
                    性别：
                  </span>
                  <span class="right-info">
                    <el-form-item>
                      <el-radio-group v-model="form.sex">
                        <el-radio :label="0" value="0" key='0'>男</el-radio>
                        <el-radio :label="1" value="1" key='1'>女</el-radio>
                        <el-radio :label="2" value="2" key='2'>保密</el-radio>
                      </el-radio-group>
                    </el-form-item>
                  </span>
                </div>
                <div class="info-content">
                  <span class="left-info-note">
                    生日：
                  </span>
                  <span class="right-info">
                    <el-form-item>
                      <el-col :span="20">
                        <el-date-picker type="date" placeholder="选择日期" v-model="form.birthday" style="width: 100%;"></el-date-picker>
                      </el-col>
                    </el-form-item>
                  </span>
                </div>
                <div class="info-content">
                  <span class="left-info-note">
                    密码：
                  </span>
                  <span class="md-username" @click="modifyPwd">修改密码</span>
                </div>
                <div class="info-content">
                  <span class="left-info-note">
                    邮箱：
                  </span>
                  <div v-if="form.is_activate === 1">
                    <span class="right-info" v-if="!mdemail">
                      {{form.email}}
                    </span>
                    <span class="right-info" v-else>
                      <el-form-item>
                        <el-input v-model="form.email"></el-input>
                      </el-form-item>
                    </span>
                    <span class="md-username" @click="mdEmail" v-if="!mdemail">修改</span>
                    <span class="md-username" @click="canEmail" v-else>取消</span>
                    <span class="username-note">已验证</span>
                  </div>
                  <div class="mail-unverified" v-else>
                    <span class="right-info">
                      您的邮箱尚未验证，请查收您的邮件列表, <br>
                      点击验证邮件中的链接完成验证, <br>
                      如果未接收邮件则尝试再次发送 
                    </span><span class="md-username" @click="goValidate">再次发送</span>
                  </div>
                </div>
                <br>
                <div class="info-note">
                  更多个人信息：
                </div>
                <div class="info-content">
                  <span class="left-info-note" style="width: 80px;">
                    婚姻状况：
                  </span>
                  <span class="right-info">
                    <el-form-item>
                      <el-radio-group v-model="form.marry_status">
                        <el-radio :label="1" value="1" key='1'>已婚</el-radio>
                        <el-radio :label="0" value="0" key='0'>未婚</el-radio>
                        <el-radio :label="2" value="2" key='2'>保密</el-radio>
                      </el-radio-group>
                    </el-form-item>
                  </span>
                </div>
              </div>
              <div class="submit-btn modify-userinfo">
                <el-form-item>
                  <el-button type="submission" class="modify-submit" @click="onSubmit">提交</el-button>
                  <el-button type="submission" @click="backIndex">返回首页</el-button>
                </el-form-item>
              </div>
            </el-form>
          </div>
        </div>
        <div class="content-list-block collect-at" v-else-if="thisid === 2">
          <div v-if="articlelist.length > 0">
            <div class="collection-top">
              <div class="collect-note">文章列表</div>
              <div class="collect-check-all">
                <span class="el-checkbox__label show" @click="delFav(0, 'all')">批量删除</span>
                <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange"></el-checkbox>
              </div>
            </div>
            <div style="margin: 15px 0;"></div>
            <el-checkbox-group v-model="checkedArticle" @change="handleCheckedCitiesChange" v-if="articlelist.length > 0">
              <div v-for="article in articlelist" class="articlelist-check">
                <div class="at-checktitle" @click="linkDetail" :data-id="article.news_id">{{article.title}}</div>
                <div class="at-checkbox">
                  <span class="el-checkbox__label show" @click="delFav(article.news_id, 'one')">删除</span>
                  <el-checkbox :label="article.news_id" :key="article.news_id"></el-checkbox>
                </div>
              </div>
            </el-checkbox-group>
            <div class="collection-top">
              <div class="collect-check-all">
                <span class="el-checkbox__label show" @click="delFav(0, 'all')">批量删除</span>
                <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange"></el-checkbox>
              </div>
            </div>
            <div class="list-page pc-bk">
              <el-pagination
                  @current-change="handleCurrentChange1"
                  background
                  layout="prev, pager, next"
                  :total="total"
              >
              </el-pagination>
            </div>
          </div>
          <div class="no-content" v-else>
            <div class="nosearch">
              <img src="../../img/mobile/emptydown.jpeg" alt="">
            </div>
            <!-- 空空如也！ -->
          </div>
        </div>
      </div>
      <!-- <div class="no-content" v-bind:class="{'scroll':scrolldetail === 1}"  v-else>
        <div class="nosearch">
          <img src="../../img/mobile/emptycontent.jpeg" alt="">
        </div> -->
        <!-- 空空如也！ -->
      <!-- </div> -->
    </div>
    <div class="no-content loginfirst" v-else>
      请登录后查看用户中心，请先 <span @click="openLogin">登录</span>
    </div>
    <footernav></footernav>
  </div>
</template>
<script>
  import api from '../../utils/api'
  import crypt from '../../utils/crypto-helper-pkcs7'
  import apiConfig from '../../utils/apiconfig.js'
  import helper from '../../utils/helper'
  import navblock from './components/nav'
  import searchtab from './components/searchtab'
  import searchlist from './components/search'
  import loginpop from './components/login'
  import footernav from './components/footernav'
  import { Toast, Indicator, Spinner, MessageBox } from 'mint-ui'
  export default {
    data () {
      return {
        showforget: false,
        loginuser: true,
        showlogin: false,
        mdemail: false,
        logintoken: '',
        mdnickname: false,
        mdloginname: false,
        ismail: false,
        cover: {
          url: '',
          img: ''
        },
        form: {
          imgurl: ''
        },
        scrolldetail: 0,
        searchtext: '',
        page: 1,
        total: 0,
        limtsize: 10,
        tablist: [],
        showsearchlist: false,
        // pages: 1,
        // loading: false,
        showmore: true,
        imgUrl: '',
        secondlist: [],
        first_level_cname: '',
        headerimg: '',
        articlelist: [],
        thistitle: '',
        thisid: 1,
        checkAll: false,
        checkedArticle: [],
        cities: [],
        isIndeterminate: true,
        imgfile: ''
      }
    },
    components: {
      navblock,
      searchtab,
      searchlist,
      footernav,
      loginpop
    },
    mounted () {
      window.addEventListener('scroll', this.handleScroll)
    },
    created () {
      var that = this
      this.thisid = parseInt(this.$route.query.id)
      if (localStorage.token && localStorage.token !== '') {
        this.logintoken = localStorage.token
        if (this.thisid === 2) {
          this.getArticlelist(1)
        } else {
          this.getuserInfo()
        }
        // that.tablist.forEach((item, index) => {
        //   if (item.id === that.thisid) {
        //     item.is_selected = 1
        //     that.thistitle = item.name
        //     that.thisid = item.id
        //   } else {
        //     item.is_selected = 0
        //   }
        // })
      } else {
        this.loginuser = false
        this.showlogin = true
      }
    },
    methods: {
      modifyPwd () {
        var that = this
        console.log('re')
        this.showlogin = true
        that.showforget = true
      },
      linkDetail (e) {
        console.log(e.currentTarget.dataset.id)
        this.$router.push('/home/detail?id=' + e.currentTarget.dataset.id)
      },
      loginbloock (val) {
        this.showlogin = val
      },
      openLogin () {
        this.showlogin = true
        console.log('222')
      },
      goValidate () {
        var params = {
          token: this.logintoken
        }
        api.GET(helper.getClientApiUrl(apiConfig.web.validateemail), params, res => {
          this.$message({
            type: 'success',
            message: '发送成功，请去邮箱验证!'
          });
        }, res => {
          this.$message({
            type: 'info',
            message: '发送失败!'
          });
        })
      },
      getFile (e) {
        this.cover.img = event.target.files[0]
        this.cover.url = window.URL.createObjectURL(this.cover.img)
        console.log(this.cover.img)
      },
      delFav (id, type) {
        var that = this
        var checkarticles = that.checkedArticle.join(",");
        console.log(type)
        if (type === 'one') {
          var artid = id
        } else {
          var artid = checkarticles
        }
        var param = {
          ids: artid,
          token: this.logintoken
        }
        if (!this.logintoken) {
          this.$router.push('/home/userpage?id=' + that.thisid)
        }
        Indicator.open('加载中...')
        this.params = param
        console.log(param)
        this.$confirm('确认删除该文章, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          api.GET(helper.getClientApiUrl(apiConfig.web.delfavourite), this.params, res => {
            that.articlelist = res.list
            Indicator.close()
            that.getArticlelist(that.page)
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
          }, res => {
            this.$message({
              type: 'info',
              message: '删除失败!'
            });
            console.log(res)
            Indicator.close()
            this.loading = false
          })
        }).catch(() => {
          Indicator.close()
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      },
      mdusername () {
        this.mdloginname = true
      },
      canusername () {
        this.mdloginname = false
        this.form.loginname = this.form.username
      },
      mdEmail () {
        this.mdemail = true
      },
      canEmail () {
        this.mdemail = false
      },
      getArticlelist (page) {
        var that = this
        this.page = page
        var param = {
          page: page,
          token: this.logintoken
        }
        Indicator.open('加载中...')
        this.params = param
        api.GET(helper.getClientApiUrl(apiConfig.web.articlelist), this.params, res => {
          that.tablist = res.nav
          that.tablist.forEach((item, index) => {
            if (item.is_selected === 1) {
              that.thistitle = item.name
              that.thisid = item.id
            }
          })
          that.first_level_cname = res.nav_title
          that.articlelist = res.list
          that.total = res.list.length
          var sortnum = []
          that.articlelist.forEach((item, index) => {
            sortnum[index] = item.news_id
          })
          that.sortnum = sortnum
          Indicator.close()
        }, res => {
          console.log(res)
          Indicator.close()
          this.loading = false
        })
      },
      getuserInfo () {
        var that = this
        var param = {
          token: this.logintoken
        }
        Indicator.open('加载中...')
        this.params = param
        api.GET(helper.getClientApiUrl(apiConfig.web.usercenter), this.params, res => {
          that.tablist = res.nav
          that.tablist.forEach((item, index) => {
            if (item.is_selected === 1) {
              that.thistitle = item.name
              that.thisid = item.id
            }
          })
          that.first_level_cname = res.nav_title
          that.form = res.user_info
          that.cover.url = res.user_info.avatar
          that.cover.img = res.user_info.avatar
          Indicator.close()
        }, res => {
          console.log(res)
          Indicator.close()
          this.loading = false
        })
        if (this.form.nkname === '') {
          this.mdnickname = true
        } else {
          this.mdnickname = false
        }
      },
      handleCurrentChange1 (val) {
        this.page = val
        this.getArticlelist(val)
      },
      handleCheckAllChange (val) {
        if (this.checkAll === true) {
          this.checkedArticle = this.sortnum
        } else {
          this.checkedArticle = []
        }
        this.isIndeterminate = false
        console.log(this.checkedArticle)
      },
      handleCheckedCitiesChange (value) {
        let checkedCount = value.length
        this.checkAll = checkedCount === this.articlelist.length
        console.log(this.checkedArticle)
        this.isIndeterminate = checkedCount > 0 && checkedCount < this.articlelist.length
      },
      handleScroll () {
        var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
        if (scrollTop >= 100) {
          this.scrolldetail = 1
        } else {
          this.scrolldetail = 0
        }
      },
      searchBtn1 () {
        this.showsearchlist = true
      },
      opensearch (val) {
        console.log('test:' + val)
        this.showsearch = val
      },
      searchlink (val) {
        console.log('testsss:' + val)
        this.showsearchlist = val
      },
      searchcan (val) {
        this.showsearchlist = val
      },
      linktoUser (e) {
        var that = this
        console.log('111')
        var thiskey = e.currentTarget.dataset.key
        if (thiskey === 'USER_CENTER') {
          that.$router.push('/home/userpage?id=' + 1)
          that.thisid = 1
          that.getuserInfo()
        } else if (thiskey === 'USER_FAVOURITE') {
          that.$router.push('/home/userpage?id=' + 2)
          that.thisid = 2
          that.getArticlelist(1)
        } 
        // else if (thiskey === 'DOWNLOAD') {
        //   that.$router.push('/home/downlist')
        // }
      },
      checkSidle (e) {
        var that = this
        var fid = parseInt(e.currentTarget.dataset.id)
        that.righttab.forEach((item, index) => {
          if (item.id === fid) {
            item.is_selected = 1
            that.thisid = item.id
            that.thistitle = item.name
            this.$router.push('/home/userpage?id=' + that.thisid)
          } else {
            item.is_selected = 0
          }
        })
      },
      onSubmit () {
        var that = this
        console.log(that.form)
        let formData = new FormData()
        // formData.append('login_name', that.form.login_name)
        formData.append('user_name', that.form.user_name)
        // formData.append('nick_name', that.form.nick_name)
        formData.append('sex', that.form.sex)
        formData.append('birthday', that.form.birthday)
        formData.append('marry_status', that.form.marry_status)
        formData.append('avatar', that.cover.img)
        formData.append('email', that.form.email)
        formData.append('token', this.logintoken)
        let configs = {
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        }
        console.log(that.cover.img)
        api.POST(helper.getClientApiUrl(apiConfig.web.modifysubmit), formData, configs, res => {
          this.$notify({
            title: '成功',
            message: '修改已保存',
            type: 'success',
            duration: 1500
          })
          this.mdemail = false
          this.getuserInfo()
          api.POST(helper.getClientApiUrl(apiConfig.web.modifysubmit), formData, configs, res => {
          }, res => {
          }, true) 
        }, res => {
          MessageBox('提交失败', res.msg)
        }, false)
      },
      backIndex () {          
        this.$router.push('/home')
      }
      // handleCurrentChange (val) {
      //   this.getDatalist(this.tabid, val)
      // },
    }
  }
</script>
